<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OCR服务测试页面</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        .section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        .section h3 {
            color: #555;
            margin-top: 0;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="file"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #0056b3;
        }
        button:disabled {
            background-color: #6c757d;
            cursor: not-allowed;
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            border-radius: 4px;
            white-space: pre-wrap;
            font-family: monospace;
        }
        .success {
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }
        .error {
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        .loading {
            background-color: #fff3cd;
            border: 1px solid #ffeaa7;
            color: #856404;
        }
        .status {
            padding: 10px;
            border-radius: 4px;
            margin-bottom: 20px;
        }
        .status.online {
            background-color: #d4edda;
            color: #155724;
        }
        .status.offline {
            background-color: #f8d7da;
            color: #721c24;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔍 OCR服务测试页面</h1>
        
        <!-- 服务状态 -->
        <div id="status" class="status">
            正在检查OCR服务状态...
        </div>
        
        <!-- 单张图片识别 -->
        <div class="section">
            <h3>📷 单张图片识别</h3>
            <div class="form-group">
                <label for="singleImage">选择图片文件：</label>
                <input type="file" id="singleImage" accept="image/*">
            </div>
            <button onclick="recognizeSingle()" id="singleBtn">开始识别</button>
            <div id="singleResult" class="result" style="display: none;"></div>
        </div>
        
        <!-- 批量图片识别 -->
        <div class="section">
            <h3>📚 批量图片识别</h3>
            <div class="form-group">
                <label for="batchImages">选择多张图片文件：</label>
                <input type="file" id="batchImages" accept="image/*" multiple>
            </div>
            <button onclick="recognizeBatch()" id="batchBtn">批量识别</button>
            <div id="batchResult" class="result" style="display: none;"></div>
        </div>
    </div>

    <script>
        // 检查OCR服务状态
        function checkStatus() {
            fetch('/WxApi/ocr/status/')
                .then(response => response.json())
                .then(data => {
                    const statusDiv = document.getElementById('status');
                    if (data.success && data.data.available) {
                        statusDiv.className = 'status online';
                        statusDiv.textContent = '✅ OCR服务在线 - ' + data.data.status.message;
                    } else {
                        statusDiv.className = 'status offline';
                        statusDiv.textContent = '❌ OCR服务离线 - ' + (data.error || '服务不可用');
                    }
                })
                .catch(error => {
                    const statusDiv = document.getElementById('status');
                    statusDiv.className = 'status offline';
                    statusDiv.textContent = '❌ OCR服务离线 - 连接失败';
                });
        }

        // 单张图片识别
        function recognizeSingle() {
            const fileInput = document.getElementById('singleImage');
            const resultDiv = document.getElementById('singleResult');
            const btn = document.getElementById('singleBtn');
            
            if (!fileInput.files[0]) {
                alert('请选择图片文件');
                return;
            }
            
            btn.disabled = true;
            btn.textContent = '识别中...';
            resultDiv.style.display = 'block';
            resultDiv.className = 'result loading';
            resultDiv.textContent = '正在识别图片，请稍候...';
            
            const formData = new FormData();
            formData.append('image', fileInput.files[0]);
            
            fetch('/WxApi/ocr/recognize/', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    resultDiv.className = 'result success';
                    resultDiv.textContent = `识别成功！
文件名: ${data.data.filename}
处理时间: ${data.data.processing_time}秒
平均置信度: ${data.data.avg_confidence}
识别文本数量: ${data.data.text_count}

识别结果:
${data.data.combined_text}`;
                } else {
                    resultDiv.className = 'result error';
                    resultDiv.textContent = `识别失败: ${data.error}`;
                }
            })
            .catch(error => {
                resultDiv.className = 'result error';
                resultDiv.textContent = `请求失败: ${error.message}`;
            })
            .finally(() => {
                btn.disabled = false;
                btn.textContent = '开始识别';
            });
        }

        // 批量图片识别
        function recognizeBatch() {
            const fileInput = document.getElementById('batchImages');
            const resultDiv = document.getElementById('batchResult');
            const btn = document.getElementById('batchBtn');
            
            if (!fileInput.files.length) {
                alert('请选择图片文件');
                return;
            }
            
            btn.disabled = true;
            btn.textContent = '批量识别中...';
            resultDiv.style.display = 'block';
            resultDiv.className = 'result loading';
            resultDiv.textContent = `正在批量识别 ${fileInput.files.length} 张图片，请稍候...`;
            
            const formData = new FormData();
            for (let i = 0; i < fileInput.files.length; i++) {
                formData.append('images', fileInput.files[i]);
            }
            
            fetch('/WxApi/ocr/batch/', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    resultDiv.className = 'result success';
                    let resultText = `批量识别完成！
总文件数: ${data.data.total_files}
总耗时: ${data.data.total_time}秒

详细结果:
`;
                    
                    data.data.results.forEach((result, index) => {
                        if (result.success) {
                            resultText += `\n${index + 1}. ${result.filename} ✅
   处理时间: ${result.processing_time}秒
   置信度: ${result.avg_confidence}
   文本数量: ${result.text_count}
   识别结果: ${result.combined_text}`;
                        } else {
                            resultText += `\n${index + 1}. ${result.filename} ❌
   错误: ${result.error}`;
                        }
                    });
                    
                    resultDiv.textContent = resultText;
                } else {
                    resultDiv.className = 'result error';
                    resultDiv.textContent = `批量识别失败: ${data.error}`;
                }
            })
            .catch(error => {
                resultDiv.className = 'result error';
                resultDiv.textContent = `请求失败: ${error.message}`;
            })
            .finally(() => {
                btn.disabled = false;
                btn.textContent = '批量识别';
            });
        }

        // 页面加载时检查状态
        window.onload = function() {
            checkStatus();
            // 每30秒检查一次状态
            setInterval(checkStatus, 30000);
        };
    </script>
</body>
</html>
